<template>
	
	<view class="subject" >
		<view class="subject-title">{{currentTitleItem.name}}</view>
		<view class="singleChoice common" v-if="currentQuestionItem.questionType === 1">
			<view class="title">
				<span>{{currentQuestionItem.itemOrder+1}}、</span>
				<span v-html="currentQuestionItem.title"></span>
			</view>
			<view class="choice">
				<radio-group v-model="answer.content" @change="radioChange">
					<label class="radio" v-for="item in currentQuestionItem.items" :key="item.prefix" >
						<radio :checked="answer.content == item.prefix" :value="item.prefix" style="margin-right: 10rpx;"/>
						<span style="margin-right: 10rpx;">{{item.prefix}} 、</span>
						<span v-html="item.content"></span>
					</label>
				</radio-group>
			</view>
		</view>
		<view  class="multipartChoice common"  v-else-if="currentQuestionItem.questionType===2">
			<view class="title">
				<span>{{currentQuestionItem.itemOrder+1}}、</span>
				<span v-html="currentQuestionItem.title"></span>
			</view>
			<view class="choice">
				<checkbox-group v-model="answer.contentArray" @change="checkboxChange">
					<label v-for="item in currentQuestionItem.items" :key="item.prefix" >
						<checkbox :checked="checkStatue(item.prefix)" :value="item.prefix" style="margin-right: 10rpx;"/>
						<span style="margin-right: 10rpx;">{{item.prefix}} 、</span>
						<span v-html="item.content"></span>
					</label>
				</checkbox-group>
			</view>
		</view>
		<view class="judge common" v-else-if="currentQuestionItem.questionType === 3">
			<view class="title">
				<span>{{currentQuestionItem.itemOrder+1}}、</span>
				<span v-html="currentQuestionItem.title"></span>
			</view>
			<view class="choice">
				<radio-group v-model="answer.content" @change="radioChange">
					<label class="radio" v-for="item in currentQuestionItem.items" :key="item.prefix" >
						<radio :checked="answer.content == item.prefix" :value="item.prefix" style="margin-right: 10rpx;"/>
						<span style="margin-right: 10rpx;">{{item.prefix}} 、</span>
						<span v-html="item.content"></span>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="grapFilling common" v-else-if="currentQuestionItem.questionType === 4">
			<view class="title">
				<span>{{currentQuestionItem.itemOrder+1}}、</span>
				<span v-html="currentQuestionItem.title"></span>
			</view>
			<view class="choice" style="margin-top: 15rpx;">
				<uni-forms-item label-position="top" :label="item.prefix+'、'" :key="item.prefix" v-for="item in currentQuestionItem.items">
					<uni-easyinput class="fill-input" v-model="answer.contentArray[item.prefix-1]" @focus="answer.completed = true" />
				</uni-forms-item>
			</view>
		</view>
		<view class="shortAnswer common" v-else>
			<view class="title">
				<span>{{currentQuestionItem.itemOrder+1}}、</span>
				<span v-html="currentQuestionItem.title"></span>
			</view>
			<view class="choice" style="margin-top: 15rpx;">
				<uni-easyinput  type="textarea" v-model="answer.content" rows="8"  @focus="answer.completed = true"/>
			</view>
		</view>
		<view class="btns">
			<view class="last" @click="goArch(currentQuestionItem.itemOrder,-1)">上一题</view>
			<view class="next" @click="goArch(currentQuestionItem.itemOrder,+1)">下一题</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			currentTitleItem : {
				type: Object,
				 default: function () {
					return {}
				}
			},
			currentQuestionItem: {
				type: Object,
				default: function () {
					return {}
				}
			},
			answer:{
				type: Object,
			    default: function () {
				  return { id: null, content: '', contentArray: [] }
			    }
			}
		},
		data(){
			return {
				 items: [{
						value: '123333',
						name: 'A. 123333'
					},
					{
						value: '123334',
						name: 'B. 123333',
					},
					{
						value: '123335',
						name: 'C. 123333'
					},
					{
						value: '123336',
						name: 'D. 123333'
					}
				],
				judgeItem: [{
					value: '1',
					name: '正确'
				},{
					value: '0',
					name: '错误'
				}],
				current: 0
			}
		},
		methods:{
			
			goArch(val1,val2){
				if( val1 == 0 && val2 == -1){
					uni.showToast({
						title: "这是第一题"
					})
					return;
				}
				
				this.$emit("preAndNext",val2 == 1 ? (val1+1) : (val1-1) );
				
			},
			radioChange: function(evt) {
				// console.log(evt.target.value)
				this.answer.content = evt.target.value;
				this.answer.completed = true;
			},
			checkboxChange: function (e) {
				console.log(e.detail.value);
				this.answer.contentArray = e.detail.value;
				this.answer.completed = true;
			},
			checkStatue(value){
				console.log(this.answer.contentArray);
				return this.answer.contentArray.indexOf(value) != -1
			}
		}
	}
</script>

<style lang="scss">
.subject{
	box-sizing: border-box;
	.subject-title{
		font-size: 40rpx;
		padding: 6rpx 20rpx;
		box-sizing: border-box;
		font-weight: bold;
	}
	.btns{
		width: 92%;
		position: fixed;
		bottom: 130rpx;
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		color: var(--themeColor);
		margin-top: 120rpx;
		view{
			width: 200rpx;
			height: 60rpx;
			border-radius: 20rpx;
			border:4rpx solid var(--themeColor);
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 4rpx 8rpx;
		}
	}
	.radio{
		display: flex;
		align-items: center;
	}
}
.common{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40rpx 20rpx;
	box-sizing: border-box;
	font-size: 32rpx;
	color: #212121;
	.title{
		width: 100%;
		display: flex;
	}
	.choice{
		width: 100%;
		radio-group,checkbox-group{
			label{
				display: flex;
				margin-top: 26rpx;
			}
			label:first-child{
				margin-top:50rpx;
			}
		}
		
	}
	
}
</style>
